<template>
	<view class="main animated fadeIn faster">
		<TitleBarVue :title="title"/>
		<view class="mt-200" style="padding-bottom: 110rpx;">
			<view v-if="coupons.length!=0"  class="d-flex" style="height: 180rpx; width: 90%; margin: 0 auto 30rpx;" v-for="(i,index) in coupons" :key="index">
				<view class="Cover rounded15">
					<view class="d-flex d-flex-bottom d-flex-center colorfff" style="margin-top: 25rpx;">
						<view style="margin-bottom: 10rpx;">￥</view>
						<view class="font-bold" style="font-size: 70rpx;">{{i.amount}}</view>
					</view>
					<view class="font20 mt-1 colorfff text-center">满{{i.limitUseAmount==0?i.amount:i.limitUseAmount}}元可用</view>
				</view>
				<view class="Coupon_item d-flex-middle d-flex bg-fff rounded15">
					<view class="d-flex d-flex-column ml-3" style="flex: 1;">
						<view class="font30 mt-1">{{i.name}} X {{i.count}}张</view>
						<view class="font20 mt-1 mb-2" style="color: #b5b5b5;"> 
						 </view>
						<view class="font20" style="color: #b5b5b5;">有效期:{{i.assetsExpireTime}}到期</view>
					</view>
					<view class="btn colorfff mr-3 px-2 rounded15 font24" @click="touse(i.limitResourceTypes)">去使用</view>
				</view>
			</view>
			<view v-if="coupons.length==0" style="width: 100%;"  >
				
					<text class="position-relative d-flex font-bold font30" style="  justify-content: center;align-items: center;top: 405rpx;">您暂时还没优惠券</text>
					<image class="position-relative" style="top: -84rpx;left: 58rpx;width: 80%;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/xiaoda.png"></image>
				
			</view>
			
		</view>
		<view class="position-fixed bottom-0 left-0 right-0 bg-fff d-flex-btn" style="height: 100rpx;">
			<view class="d-flex-btn">
				<view style="text-decoration: underline" @click="gotoHistoryCouponPage">查看历史优惠券</view>
				<text class="iconfont icon-youjiantou font20"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import TitleBarVue from '../../components/TitleBar.vue';
	import { FirstChangeApi } from "../../http/firstChange";
	import store from '@/store/index.js';
	export default {
		data() {
			return {
				title: '优惠券',
				coupons:[]
			}
		},
		components:{TitleBarVue},
		onLoad() {
			this.GetCoupon(1);
		},
		methods: {
			async GetCoupon(state) {
				let params = {
					state : state
				}
				
				let res = await FirstChangeApi.GetCoupon(params);
				this.coupons = res.records
				// res.records.forEach(i=>{
				// 	this.coupons.push(i);
				// })
				console.log(this.coupons);
			},
			touse(type){
				if(type==null){
					uni.navigateTo({
						url: '/pagesMain/Recharge/Recharge'
					})
					return
				}
				 const types = type.split(',');
				 console.log(types);
				 if (types.includes('2')||types.includes('3')) {//充值搭币
					 uni.navigateTo({
					 	url: '/pagesMain/Recharge/Recharge'
					 })
					 return
				 }
				if (types.includes('4')){//抽奖
					uni.navigateTo({
						url: '/pagesApp/raffle/raffle'
					})
					 return
				} 
				if (types.includes('5')){
					uni.navigateTo({
						url: '/pagesMain/star-DaziCard/star-DaziCard'
					})
					 return
				}
				if (types.includes('6') || types.includes('7')){
					uni.navigateTo({
						url: '/pagesMain/member/member'
					})
					 return
				}
				if (types.includes('12')){
					uni.navigateTo({
						url: '/pagesMain/star-daziBell/star-daziBell'
					})
					 return
				}
			},
			gotoHistoryCouponPage() {
				uni.navigateTo({
					url: '/pagesApp/HistoryCoupon/HistoryCoupon'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.main {
	background: #fff;
	overflow: hidden;
	.Cover {
		width: 130rpx;
		height: 100%;
		border-right: 1px dashed #f5f5f5;
		background-image: linear-gradient(135deg, #f7880c 0%, #fe7039 40%, #fe536f 60%, #fe4594 90%, #f73ea0 100%);
	}
	.Coupon_item {
		flex: 1;
		box-shadow: 3px 3px 3px rgba(0, 0, 0, .1);
	}
	.btn {
		height: 50rpx;
		line-height: 50rpx;
		background-image: linear-gradient(-90deg, #f7880c 0%, #fe7039 40%, #fe536f 60%, #fe4594 90%, #f73ea0 100%);
	}
}
</style>
